<script setup lang="ts">
import { ref } from 'vue'
let msg = ref('');
let showMsg = ref(false);
const openMsg = (resMsg,times = 1000) => {
	showMsg.value = true;
	msg.value = resMsg;
	setTimeout(() => {
		showMsg.value = false;
	}, times);
}
defineExpose(
	{
		openMsg,
		msg,
		showMsg
	}
)
</script>

<template>
	<Transition name="fade">
		<div class="msg" v-show='showMsg'>
			<div class="msginfo">
				{{ msg }}
			</div>
		</div>
	</Transition>
</template>
<style lang="scss">
/* 在你的CSS文件中 */
.fade-enter-active, .fade-leave-active {
	transition: opacity 0.3s;
}

.fade-enter-from, .fade-leave-to {
	opacity: 0;
}
.msg{
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
    z-index: 999;
	.msginfo{
		width: 300px;
		height: 100px;
		background: #0000007d;
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		color: #fff;
		font-size: 20px;
		font-weight: 600;
	}
}
</style>
